<template>
  <div>
    <h1>登录</h1>
    <div>没有账号?<router-link to="/register">前往注册</router-link></div>
    <div>
      <div>
        <label for="username">姓名:</label>
        <input
          id="username"
          type="text"
          placeholder="请输入登录账户"
          v-model="user.username"
        />
      </div>
      <div>
        <label for="password">密码:</label>
        <input
          id="password"
          type="text"
          placeholder="请输入登录账户"
          v-model="user.password"
        />
      </div>
      <div>
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from "@/utils/auth";
export default {
  data() {
    return {
      user: {
        username: "admin",
        password: "123",
      },
    };
  },
  methods: {
    async login() {
      let {code,token} = await this.$api.users.login(this.user);

     
      /* 
             登录成功后，要完成的事项有两个
             1、保存token到localStorage中
             2、使用路由进行跳转
           */
       setToken(token);
      if (code) {
        //跳转到后台，使用编程式路由跳转
        this.$router.replace("/home");
      }
    },
  },
};
</script>

<style>
</style>